<template>
<main>
  <nav>
    <div>
        <h2>华杉商城 2.0</h2>
        <RouterLink @click="index=0" :class="{active:index==0}" to="/index">
          <van-icon name="wap-home" />
          首页
        </RouterLink>
        <RouterLink @click="index=1" :class="{active:index==1}" to="/manager-list">
          <van-icon name="manager" />
          管理员
        </RouterLink>
        <RouterLink @click="index=2" :class="{active:index==2}" to="/goods-list">
          <van-icon name="bag" />
          商品管理
        </RouterLink>
        <RouterLink to="/login">
          <van-icon name="wap-home" />
          首页
        </RouterLink>
      </div>
  </nav>
  <div class="main-right">
    <header>
      <img src="../assets/refresh.jpg" alt="">
      <div class="header-right">
        <span class="badge badge-pill badge-dark mr10">Pro</span>
        <van-icon name="friends" />
        系统管理员
        <span @click="onExit" class="badge badge-pill badge-dark ml10 pointer">退出</span>
      </div>
    </header>
    <div class="router">
      <RouterView />
    </div>
  </div>
</main>
</template>

<script setup>
import { ref } from 'vue';
import { RouterLink,useRouter } from 'vue-router';
import { showSuccessToast,showConfirmDialog  } from 'vant';
const router = useRouter();

const index = ref(1);

const onExit = () => {
    showConfirmDialog({
      title: '系统提示',
      message:'真的要退出吗？',
    })
    .then(() => {
      // on confirm
      showSuccessToast('退出成功！');
      router.push("/login");
    })
    .catch(() => {
      // on cancel
    });
    
};
</script>
<style scoped>
main{
  display: flex;
}
.main-right{
  flex-grow: 1;
}
header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #fff;
}
header img{
  cursor: pointer;
  height: 22px;
}
.header-right{
  display: flex;
  align-items: center;
}
nav{
  height: 100vh;
  background-color: #101116;
  width: 150px;
  padding: 25px 20px;
}
h2{
  font-size: 16px;
  color: #F0D5B2;
  margin-bottom: 30px;
}
nav a{
  color: #fff;
  text-decoration:none;
  font-size: 14px;
  display: block;
  margin-bottom: 30px;
}
nav a:hover{
  color: #F0D5B2;
}
nav a:active{
  color: #ff0;
  font-size: 12px;
}
.router{
  margin: 20px;
  background-color: #fff;
  padding: 20px;
}
.active{
  color:#ff0;
}
</style>

